<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-row :gutter="20">
        <el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="邮箱号码" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男" />
              <el-radio label="女" />
              <el-radio label="保密" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { getProUser, updateBasicUser } from "../../api/userCenter/index";
import { ElMessage, ElMessageBox } from "element-plus";
const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive({
  phone: "",
  email: "",
  sex: "保密",
});
const rules = reactive<FormRules>({
  phone: [
    { required: true, message: "请输入手机号码", trigger: "blur" },
    {
      pattern:
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
      message: "请输入正确的手机号码格式",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱号码", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱号码格式", trigger: "blur" },
  ],
});
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(ruleForm);

      const res = await updateBasicUser({
        phone: ruleForm.phone,
        email: ruleForm.email,
        sex: ruleForm.sex,
        id: sessionStorage.getItem('id'),
      });
      if (res.data.success) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
        await onLoad();
      } else {
        ElMessage.error(res.data.msg);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const onLoad = async () => {
  const res = await getProUser(1);
  ruleForm.email = res.data.data[0].email;
  ruleForm.phone = res.data.data[0].phone;
  ruleForm.sex = res.data.data[0].sex;
};
onMounted(async () => {
  await onLoad();
});
</script>

<style></style>
